<template>
  <el-form class="search-bar" :model="form" :inline="true">
    <el-row>
      <el-col :span="4.5">
        <el-form-item prop="groupId" v-if="option.group">
          <el-select v-model="form.groupId" @change="handleSubmit" placeholder="分组" style="width: 125px">
            <el-option
              v-for="(option, optionIndex) in groupOption"
              :key="optionIndex"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="searchType" v-if="option.smartLockType">
          <el-select v-model="form.searchType" @change="handleSubmit" placeholder="状态" style="width: 125px">
            <el-option
              v-for="(option, optionIndex) in smartLockOption"
              :key="optionIndex"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="status" v-if="option.smartMeterType">
          <el-select v-model="form.status" @change="handleSubmit" placeholder="状态" style="width: 125px">
            <el-option
              v-for="(option, optionIndex) in smartMeterOption"
              :key="optionIndex"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="status" v-if="option.smartWaterMeterType">
          <el-select v-model="form.status" @change="handleSubmit" placeholder="状态" style="width: 125px">
            <el-option
              v-for="(option, optionIndex) in smartWaterMeterOption"
              :key="optionIndex"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :prop="option.searchStr.key" v-if="option.searchStr.show">
          <el-input v-model="form[option.searchStr.key]" :placeholder="option.searchStr.placeholder" @keyup.enter="handleSubmit" style="width: 250px">
            <template #append>
              <el-button :icon="Search" @click="handleSubmit" />
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup name="SearchBar">
import { Search } from '@element-plus/icons-vue'
import { onBeforeMount } from 'vue'

const { proxy } = getCurrentInstance()

const smartLockOption = [{
  label: '全部状态',
  value: ''
}, {
  label: '房间锁',
  value: '2'
}, {
  label: '公区锁',
  value: '3'
}, {
  label: '低电量锁',
  value: '1'
}, {
  label: '未绑定房间',
  value: '4'
}]

const smartWaterMeterType = [{
  label: '全部状态',
  value: ''
}, {
  label: '离线',
  value: '1'
}, {
  label: '未绑定房间',
  value: '2'
}, {
  label: '房间水表',
  value: '4'
}, {
  label: '公区水表',
  value: '5'
}, {
  label: '低电量水表',
  value: '3'
}]

const smartMeterOption = [{
  label: '全部状态',
  value: ''
}, {
  label: '离线',
  value: '1'
}, {
  label: '断电',
  value: '3'
}, {
  label: '未绑定房间',
  value: '2'
}, {
  label: '房间电表',
  value: '4'
}, {
  label: '公区电表',
  value: '5'
}]

const emit = defineEmits()
const props = defineProps({
  option: {
    type: Object,
    default: () => {
      return {
        group: false,
        smartLockType: false,
        smartMeterType: false,
        smartWaterMeterType: false,
        searchStr: {
          show: false,
          key: 'searchStr',
          placeholder: ''
        }
      }
    }
  }
})

const groupOption = ref([])
const data = reactive({
  form: {}
})
const { form } = toRefs(data)

onBeforeMount(async () => {
  groupOption.value = await proxy.$dictOption.groupDictOption()
})

function handleSubmit() {
  emit('search', form.value)
}
</script>
<style lang="scss" scoped>
.search-bar {
  .el-form-item {
    margin-right: 16px
  }
}
</style>